<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>layui</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="__PUBLIC__/layui/css/layui.css"  media="all">
  <link rel="stylesheet" href="__PUBLIC__/font-awesome/css/font-awesome.min.css" media="all" />
  <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<style>
    .layui-form-item .layui-input-inline{
       width: 600px;
    }
    .layui-form-label{
        width: 80px;
    }

</style>
<body>
<div style="margin-top: 20px;">
</div>
<form class="layui-form">
  <input type="hidden" name="order_id" id="order_id" value="{$dat.order_id}">
  <div class="layui-form-item">
    <label class="layui-form-label" id="">取消理由</label>
    <div class="layui-input-inline">
      <select name="code" id="code" lay-filter="test">
        <option value="">请选择取消原因</option>
        <option value="51">Airline Flight Cancellation - Affects Customer/Traveller</option>
        <option value="52">Airline Schedule Change - Unacceptable to Customer/Traveller</option>
        <option value="53"> Death - Customer/Traveller or Immediate Family</option>
        <option value="54">Jury Duty/Court Summons - Affects Customer/Traveller</option>
        <option value="55">Discretionary Cancellation (Viator Use Only)</option>
        <option value="56">Medical Emergency/Hospitalization - Customer/Traveller or Immediate Family</option>
        <option value="57">Military Service - Affects Customer/Traveller</option>
        <option value="58">National Disaster (Insurrection, Terrorism, War) -
          Affects Customer/Traveller</option>
        <option value="59">Natural Disaster (Earthquake, Fire, Flood) - Affects
          Customer/Traveller</option>
        <option value="62">Service Complaint - Denied Trip Add On Service</option>
        <option value="63">Transport Strike/Labor Dispute - Affects Customer/
          Traveller</option>
        <option value="66">Trip Add On Supplier Cancellation</option>
        <option value="71">Credit Card Fraud</option>
        <option value="72">Car Segment Cancellation - Affects Customer/
          Traveller</option>
        <option value="73">Package Segment Cancellation - Affects Customer/
          Traveller</option>
        <option value="74">Hotel Segment Cancellation - Affects Customer/
          Traveller</option>
        <option value="77">Re-book</option>
        <option value="78">Duplicate Purchase</option>
        <option value="82">Honest Mistake - Incorrect Purchase</option>
        <option value="87">Non-Refundable Cancellation (Outside 2 Days of
          Travel/Not Cencellation Event)</option>
        <option value="88">Non-Refundable Cancellation (Within 2 Days of
          Travel)</option>
        <option value="98">Customer Service/Technical Support Response
          Outside Time Limit</option>
        <option value="99">Duplicate Processing</option>
        <option value="00">测试</option>
      </select>
    </div>
  </div>

  <div class="layui-form-item" id="message" hidden>
    <label class="layui-form-label">具体原因</label>
    <div class="layui-input-inline">
      <input name="refund_money" id="msg" lay-verify="required" placeholder="请输入取消订单的具体原因" autocomplete="off" class="layui-input" type="text" >
    </div>
  </div>
</form>

  <div class="layui-form-item">
    <div class="layui-input-block">
      <button class="layui-btn" id="calorder">立即提交</button>
    </div>
  </div>


<script src="__PUBLIC__/layui/layui.js"></script>
<script src="__PUBLIC__/jquery/jquery.min.js"></script>
<script>
    var message;
    layui.config({
        base: '__JS__/',
        version: '1.0.1'
    }).use(['app', 'message'], function() {
        var app = layui.app,
            $ = layui.jquery,
            layer = layui.layer;
        //将message设置为全局以便子页面调用
        message = layui.message;
        //主入口
        app.set({
            type: 'iframe'
        }).init();
    });
</script>
<script>
    layui.use(['layer', 'form'], function() {
        var layer = layui.layer,
            $ = layui.jquery,
            form = layui.form;

        form.on('select(test)', function(data){
            var code=data.value;
           if(code=='62' || code=='66'){
               $('#message').show();
           }else{
               $('#message').hide();
           }
        });
    });
</script>
<script>
  $('#calorder').click(function () {
      var code=$('#code').val();
      var msg=$('#msg').val();
      var order_id=$('#order_id').val();
      var url='calOrder';
     if(code==''){
         layer.msg('取消理由必选');
         return false;
     }
     if(code=='62' || code=='66'){
         if(msg.length<1){
             layer.msg('请完善具体原因');
             return false;
         }
     }
     $.post(url,{'code':code,'msg':msg,'order_id':order_id},function (data) {
         layer.msg(data.msg);
         var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
         parent.layer.close(index); //再执行关闭
     });

  })
</script>
</body>
</html>
